<template>
  <div>
    <div class="item-title">
      分项统计
    </div>
    <div class="item-body">
<!--      <el-radio-group v-model="type" size="mini" @change="handleTypeChange">-->
<!--        <el-radio-button label="电"></el-radio-button>-->
<!--        <el-radio-button label="水"></el-radio-button>-->
<!--        <el-radio-button label="气"></el-radio-button>-->
<!--        <el-radio-button label="热"></el-radio-button>-->
<!--      </el-radio-group>-->
      <div id="subItem" ref="subItemRef" style="width: 100%;height: 230px;margin-top: 10px;"></div>
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import {getEnergyItemData} from '@/api/bigScreen'
export default {
  name: 'SubItemStatistics',
  data() {
    return {
      type: '电',
      subItemList: [],
      option: {
        legend: {
          // data: ['空调用量','照明用电','公共用电'],
          right: 0, // 水平居中
          bottom: 0, // 底部对齐
          orient: 'vertical', // 水平排列
          textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 14,
          },
        },
        toolbox: {
          show: true,
          // feature: {
          //   mark: { show: true },
          //   dataView: { show: true, readOnly: false },
          //   restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        series: [
          {

            name: 'Nightingale Chart',
            type: 'pie',
            radius: [40, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              // { value: 40, name: '空调用量' },
              // { value: 38, name: '照明用电' },
              // { value: 32, name: '公共用电' },
            ],
            label: {
              show: true,
              position: 'outside', // 或者使用 'inside', 'top', 'left', 'right', 'bottom' 等
              color: '#fff' // 设置字体颜色为深灰色
            }
          }
        ]
      },
      myChart: null,
    }
  },
  mounted() {
    this.initEcharts()
  },
  // 销毁组件
  beforeDestroy() {
    this.disposeChart();
  },
  watch:{
  },
  methods: {
    handleTypeChange() {
      switch (this.type) {
        case '电':
          this.option.legend.data = []
          this.option.series[0].data = []
          break;
        case '水':
          this.option.legend.data = []
          this.option.series[0].data = []
          break;
        case '气':
          this.option.legend.data = []
          this.option.series[0].data = []
          break;
        case '热':
          this.option.legend.data = []
          this.option.series[0].data = []
          break;
      }
      this.myChart.setOption(this.option);
    },
    initEcharts() {
      this.myChart = echarts.init(this.$refs.subItemRef);
      this.getEnergyItem(1);
      window.addEventListener('resize', this.handleResize);
    },
    getEnergyItem(energyType){
      getEnergyItemData({energyType:energyType}).then(response => {
        if(response.code === 200) {
          this.option.series[0].data = response.data;
        }
        this.myChart.setOption(this.option);
      })
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    disposeChart() {
      if (this.myChart) {
        // 移除 resize 事件监听
        window.removeEventListener('resize', this.handleResize);
        // 销毁图表实例
        this.myChart.dispose();
        this.myChart = null;
      }
    }
  }
}
</script>
<style src="../../../assets/static/css/bigscreen.css" scoped></style>
<style lang="scss" scoped>
.item-body {
  padding: 0 10px;
  ::v-deep .el-radio-button__inner{
    background: transparent !important;
    border: 1px solid #42b2fe !important;
    margin-left: -1px !important;
    color: #fff;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
    color: #42b2fe;
  }
}
</style>
